<template>
  <div class="app-container">
    <div class="left">
      <div class="top shadow">
        <div class="group-name">WELCOME</div>
      </div>
      <div class="segment">
        <div :class="segmentIndex == 1 ? 'item item-sel' : 'item'" @click="segmentChange(1)">待办审批({{count.cnt||0}})</div>
        <div :class="segmentIndex == 2 ? 'item item-sel' : 'item'" @click="segmentChange(2)">公告消息</div>
      </div>

            <!-- 代办模块 -->
      <template v-if="segmentIndex == 1">
        <div class="search shadow">
          <el-input style="flex: 1" v-model="eventReq._content_" type="text" placeholder="请输入事件描述" @change="getEventList"></el-input>
          <!-- <el-select style="flex: 1; margin-left: 20px" v-model="eventReq.eventType" placeholder="请选择类型" clearable @change="getEventList">
            <el-option label="加班" :value="5"></el-option>
            <el-option label="请假" :value="6"></el-option>
            <el-option label="质检告知书" :value="2"></el-option>
            <el-option label="巡查" :value="1"></el-option>
          </el-select> -->
          <SelectDateRange style="flex: 1; margin-left: 20px" :start.sync="eventReq.startTime" :end.sync="eventReq.endTime" @change="getEventList"></SelectDateRange>
        </div>
        <div class="tags">
          <div class="tag" :class="{ 'tag-sel': tagIndex == index }" v-for="(item, index) in subTabs" :key="index" @click="tagChange(index)">
            {{ item.label }}({{ item.count }})
          </div>
        </div>
        <div class="event-list">
          <el-empty v-if="eventList.length == 0" description="暂无数据"></el-empty>
          <template v-else>
            <div class="item shadow" :class="`row-bg-color-${item.overdueStatus}`" v-for="(item, index) in eventList" :key="index" @click="handleEventDetail(item)">
              <span class="type">
                {{ item.instanceStartNodeName }}
              </span>
              <div style="flex: 1">
                <div class="text">{{item.name}}</div>
                <div class="text">
                  <span class="x-label">提交人:</span>
                  {{ item.executorName||'--' }}（{{ item.gmtCreate }}）
                </div>
                <div class="text">
                  <span class="x-label">所属部门:</span>
                  {{ item.deptName||'--' }}
                </div>
                <!-- <div class="text">
                  <span class="x-label">地址:</span>
                  {{ item.address || '--' }}
                </div> -->
              </div>
              <div class="text text-right">
                <!-- <el-button class="el-btn" @click="handleEventDetail(item)" type="primary" size="mini">详情</el-button> -->
                <!-- <el-button v-if="item.type == 1" class="el-btn" @click.stop="handleEvent(item)" type="primary" size="mini">{{ item.currentNodeName }}</el-button> -->
                <div>
                  <span style="color: #cbcace">状态：</span>
                  <span>{{ getTaskState(item.status) }}</span>
                </div>
              </div>
            </div>
          </template>
        </div>
      </template>
      <!-- 公告模块 -->
      <template v-if="segmentIndex == 2">
        <div class="search shadow" style="margin-bottom: 20px" v-if="segmentIndex == 2">
          <el-select v-model="noticeReq.type" placeholder="请选择类型" clearable @change="getMyNoticeList">
            <el-option label="活动" :value="1"></el-option>
            <el-option label="新闻" :value="2"></el-option>
          </el-select>
        </div>
        <!-- <div class="tags">
          <div class="tag" :class="{'tag-sel':tagIndex==index}" v-for="(item,index) in subTabs" :key="index" @click="tagChange(index)">{{item.label}}({{item.count}})</div>
        </div> -->
        <div class="event-list">
          <el-empty v-if="eventList.length == 0" description="暂无数据"></el-empty>
          <template v-else>
            <div class="item shadow" v-for="(item, index) in eventList" :key="index" @click="handleActicle(item)">
              <span class="type">公告</span>
              <div style="flex: 1">
                <div class="text">
                  <span style="color: #cbcace">标题:</span>
                  {{ item.title }}
                </div>
                <div class="text">
                  <span style="color: #cbcace">类型:</span>
                  {{ item.type == 1 ? '活动' : '新闻' }}
                </div>
                <div class="text">
                  <span style="color: #cbcace">发布时间:</span>
                  {{ item.gmtCreate }}
                </div>
              </div>
              <div class="text text-right">
                <div>
                  <span>{{ item.status == 1 ? '已发布' : '已下架' }}</span>
                </div>
              </div>
            </div>
          </template>
        </div>
      </template>
    </div>
    <div class="right">
      <div>
        <Worker></Worker>
        <!-- <CheckTable></CheckTable>  -->
        <AlarmList></AlarmList>
      </div>
    </div>


    <HandleTask :show.sync="showHandleTask" :id="currentItem.id" @confirm="getEventList"></HandleTask>

    <!-- 公告详情 -->
    <el-drawer title="--" :visible.sync="showActicleDrawer" :with-header="false">
      <div class="shadow" style="padding: 20px">
        <h2 style="text-align: center">{{ currentItem.title || '--' }}</h2>
        <div style="text-align: center; color: #999">{{ currentItem.type == 1 ? '活动' : '新闻' }}</div>
        <div v-html="currentItem.content"></div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import Worker from '@/components/IndexComponent/worker.vue';
import AlarmList from '@/components/IndexComponent/alarmList.vue';
import CheckTable from '@/components/IndexComponent/checkTable.vue';

import HandleTask from '@/views/eventManage/components/handleTask.vue'

import {taskTodoCount, taskTodo} from '@/api/flow';
import {getMyList} from '@/api/notice'

// 事件类型 2为告知书，3,4暂时无用；
const EVENT_TYPE_OPTIONS = { 1: '巡查', 2: '部门安全隐患检查告知书', 3: '部门考核告知书', 4: '部门违纪考核告知书', 5: '加班', 6: '请假', 7: '告知书申诉单' };
// 告知书类型 当eventType为2时，判断noticeType;
const NOTICE_TYPE_OPTIONS = { 1: '部门安全隐患检查告知书', 2: '部门考核告知书', 3: '部门违纪考核告知书' };
export default {
  components: {Worker, AlarmList, CheckTable, HandleTask},
  name: "HomeView",
  data() {
    return {
      segmentIndex: 1,
      eventReq: {ARG_USER_SYSTEM: 1, page: 1,pageSize: 999, orderBy: 'gmtModified'},
      noticeReq:{page: 1, pageSize: 999, type: 1},
      eventList: [],
      subTabs: [],
      showActicleDrawer: false,
      currentItem: {},
      count: {},
      showHandleTask: false,

    };
  },
  mounted() {
    this.getEventList()
  },
  methods: {
    segmentChange(i) {
      this.segmentIndex = i;
      if(i == 1) {
        this.getEventList()
      }else{
        this.getMyNoticeList()
      }
    },
    getMyNoticeList() {
        getMyList(this.noticeReq).then(res => {
            this.eventList = res.data || []
        })
    },
    getEventList(){
        taskTodoCount({ARG_USER_SYSTEM: 1}).then(res =>{
            this.count = res.data[0] || {};
        })
        taskTodo(this.eventReq).then(res => {
            this.eventList = res.data || []
        })
    },
    handleActicle(item) {
        this.currentItem = structuredClone(item)
        this.showActicleDrawer = true;
    },
    handleEvent() {},
    tagChange() {},
    handleEventDetail(item) {
        this.currentItem = structuredClone(item);
        this.showHandleTask = true;
    },
    getEventType(item) {
      if (item.eventType == 1 && item.eventLevel == 6) return '垃圾清运'
      if (item.eventType == 1) return '巡查事件';
      if (item.eventType == 5) return '加班申请';
      if (item.eventType == 6) return '请假申请';
      else return '质检告知书';
    },
    getEventTypeDom(item) {
      const span = item.eventType == 5 ? '加班人' : item.eventType == 6 ? '请假人' : '类型';
      let str = '';
      if (item.eventType == 2) {
        str = NOTICE_TYPE_OPTIONS[item.noticeType] || '--';
      } else if ([5, 6].includes(item.eventType)) {
        str = item.extData || '--';
      } else {
        str = EVENT_TYPE_OPTIONS[item.eventType] || '--';
      }
      return `<div class="text"><span class="x-label">${span}：</span>${str}</div>`;
    },
  }
};
</script>
<style scoped lang="scss">
::v-deep {
  img {
    max-width: 100%;
  }
  .shadow {
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(56, 177, 255, 0.08);
    border-radius: 6px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .m15 {
    margin: 15px 0;
  }
  .p20 {
    padding: 20px;
  }
  .title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }
  .num {
    color: RGBA(62, 108, 255, 1);
    font-size: 24px;
    font-weight: 700;
  }
  .label {
    color: RGBA(130, 137, 158, 1);
  }
  .x-label {
    color: #666;
  }
  .column-box {
    display: flex;
    justify-content: space-between;
    .column {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      padding: 20px 0;

      &::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        height: 100%;
        border-right: 1px solid RGBA(183, 192, 223, 1);
      }
      &:last-child {
        &::after {
          border: none;
        }
      }
    }
  }
}
.app-container {
  display: flex;
  box-sizing: border-box;
}
  .left {
    flex-shrink: 0;
    margin-right: 20px;
    width: 1169px;

    .top {
      height: 124px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding-left: 40px;
      background: url('@/assets/images/banner.png') no-repeat center center / cover;
      border-radius: 10px;

      .group-name {
        font-weight: 900;
        line-height: 1;
        letter-spacing: 4px;
        font-size: 24px;
        color: #409eff;
        font-style: italic;
      }

      .member-name {
        font-size: 20px;
      }
    }

    .segment {
      margin: 17px 0;
      display: flex;
      font-size: 18px;
      color: #333333;
      .item {
        cursor: pointer;
        margin-right: 80px;
        &-sel {
          color: #3e6cff;
          font-weight: 700;
        }
      }
    }

    .search {
      display: flex;
      padding: 20px;
    }
    .tags {
      margin: 17px 0;
      display: flex;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #82899e;
      .tag {
        width: 126px;
        height: 38px;
        margin-right: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background: #ffffff;
        border-radius: 12px;
        &-sel {
          background: #54a0ff;
          color: #ffffff;
        }
      }
    }
    .event-list {
      height: 800px;
      overflow-y: auto;
      .item {
        padding: 17px 20px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        cursor: pointer;
        &:hover {
          box-shadow: 0px 0px 6px 1px rgba(56, 177, 255, 0.4);
        }
        .type {
          margin-right: 20px;
          flex-shrink: 0;
          padding: 7px 10px;
          font-size: 16px;
          font-weight: 500;
          color: #819fff;
          background: #eff2ff;
          border-radius: 8px;
        }
        .text {
          font-size: 14px;
          color: #333333;
        }
        .text-right {
          text-align: right;
          .el-btn {
            margin-top: 6px;
          }
        }
      }
    }
  }

  .right {
    flex-shrink: 0;
    width: 670px;
  }
</style>
